<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .modal {
        /* 半透明 铺满窗口 */
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        justify-content: center;
        align-items: center;
        display: none;
      }
      .modal .modal-box {
        width: 500px;
        min-height: 300px;
        background: white;
        position: relative;
        padding: 20px;
      }

      .modal .modal-box .close {
        background: transparent;
        border: none;
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
      }
      .modal .modal-box .close:hover {
        border: solid 1px;
      }
    </style>
  </head>
  <body>
    <h1>模态框</h1>
    <!-- onclick="abc.style.display='flex'" -->
    <button data-modal-action="open" data-modal-id="abc">打开模态框</button>
    <hr />
    <div class="modal" id="abc">
      <div class="modal-box">
        <button class="close" data-modal-action="close" data-modal-id="abc">
          X
        </button>

        <form name="form">
          <p>姓名 <input type="text" name="username" /></p>
          <p>
            性别 <input type="radio" checked name="gender" value="1" /> 男
            <input type="radio" name="gender" value="2" /> 女
          </p>
          <p>
            爱好
            <input type="checkbox" name="hobby" value="html" />HTML
            <input type="checkbox" name="hobby" value="css" />CSS
            <input type="checkbox" name="hobby" value="js" />JS
            <input type="checkbox" name="hobby" value="vue" />VUE
          </p>
          <p>
            城市
            <select name="city">
              <option value="nanjing">南京</option>
              <option value="beijing" selected>北京</option>
              <option value="shanghai">上海</option>
              <option value="wuxi">无锡</option>
            </select>
          </p>
          <p>
            简介
            <textarea name="desc"></textarea>
          </p>
          <p>
            <button data-form-action="save" type="button">保存</button>
            <button type="button" data-modal-action="close" data-modal-id="abc">
              取消
            </button>
          </p>
        </form>
      </div>
    </div>
    <script>
      document.onclick = function (e) {
        const target = e.target;
        const action = target.dataset.modalAction;
        if (action === undefined) {
          return;
        }

        if (action === "close") {
          const el = document.getElementById(target.dataset.modalId);
          el.style.display = "none";
        }

        if (action === "open") {
          const el = document.getElementById(target.dataset.modalId);
          el.style.display = "flex";
        }
      };

      const form = document.form;
      form.onclick = function (e) {
        const target = e.target;
        const action = target.dataset.formAction;
        if (action === undefined) {
          return;
        }
        if (action === "save") {
          // 获取用户表单输入
          const data = {
            username: form.username.value,
            gender: form.gender.value,
            city: form.city.value,
            desc: form.desc.value,
            hobby: [...form.querySelectorAll('[name="hobby"]:checked')].map(
              (el) => el.value
            ),
          };
          console.log(data);
        }
      };
    </script>
  </body>
</html>
